<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./echarts.js"></script>
    <style>
      .box {
        width: 900px;
        height: 700px;
        border: 2px solid red;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <!-- 
        使用echarts五步骤
        1.下载导入echarts
        2.准备一个具有宽高的容器
        3.初始化echarts获取实例
        4.准备数据  （重点）
        5.实例.setOption(数据)
    -->

    <div class="box"></div>
    <script>
      let myCharts = echarts.init(document.querySelector('.box'))
      let option = {
        color: ['red', 'blue', 'green', 'pink', 'purple'],
        // 标题
        title: {
          text: '拆线图',
          textStyle: {
            color: 'red',
          },
          //   left: 'center',
        },
        // 工具提示
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#ff0000',
            },
          },
        },
        // 图例 图形的示例
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
        },
        // 工具盒子
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        // 网络  图形与盒子的内边框
        grid: {
          left: '0%',
          right: '4%',
          bottom: '3%',
          // 包含文字
          containLabel: true,
        },
        // x轴
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
        ],
        // y轴
        yAxis: [
          {
            type: 'value',
          },
        ],
        // 系例  数据
        series: [
          {
            name: 'Email', //名字 与lenged对应
            type: 'line', // 什么图标
            // stack: 'Total', // 堆叠

            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: 'Union Ads',
            type: 'line',

            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: 'Video Ads',
            type: 'line',

            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: 'Direct',
            type: 'line',

            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: 'Search Engine',
            type: 'line',

            // label: {
            //   show: true,
            //   position: 'top',
            // },

            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      }
      myCharts.setOption(option)
    </script>
  </body>
</html>
